<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import chart from '@/components/common/chart.vue'
// 图标到时候按需引入
import sbbj_wifi from '@/assets/img/overview/sbbj_wifi.png';
import sbbj_dy from '@/assets/img/overview/sbbj_dy.png';

const props = defineProps<{
  name: string[]
  data: number[],
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || ['rgba(63, 177, 227, 1)', 'rgba(107, 230, 193, 1)']


const options = computed(() => {
  let max = Math.max(...props.data)
  let indicator: any[] = []
  props.data.forEach((item, index) => {
    indicator.push({
      text: props.name[index],
      max,
    })
  })
  let opt = {
    color: ["#3fb1e3","#6be6c1","#626c91","#a0a7e6","#5aa3a3","#96dee8","#5aa35a","#81e981"],
    animation: false,
    radar: [
      {
        indicator,
        center: ['50%', '50%'],
        radius: '65%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'polygon',
        axisName: {
          show: true,
          color: '#000000',
          // formatter: [
          //   'a|{value}',
          //   'b|{value}'
          // ],
          formatter: (value: any) => {
            return '{a|}\n{b|'+ value + '}';
          },
          rich: {
            a: {
              height: 50,
              width: 50,
              align: 'center',
              backgroundColor: {
                image: sbbj_wifi
              }
            },
            b: {
              fontSize: 16,
              lineHeight: 30,
              align: 'center',
              fontFamily: 'Microsoft YaHei',
            }
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(5,139,213,0.2)', '#fff'],
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 20
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(3,85,130,0.1)',
            width: 1

          }
        },
        splitLine: {
          show: false,

        },
        axisTick: {
          show: false
        }
      },
    ],
    series: [
      {
        type: 'radar',
        lineStyle: {
          width: 3
        },
        symbolSize: 6,
        areaStyle: {
          opacity: 0.8
        },
        data: [
          {
            value: props.data,
            name: ''
          },
        ]
      },
    ]
  }
  return opt;
})

</script>

<template>
  <div class="radar-wrapper" :style="{ width: `${width}`, height: `${height}` }" >
    <chart class="w-2/3 h-full chart" :options="options" />
    <div class="w-1/3 h-full sbbj">
      <div v-for="(item, index) in 10" :key="index">
        <img :src="sbbj_wifi" alt="">
        <p>CPU</p>
        <p>120</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.radar-wrapper {
  display: flex;
  justify-content: space-between;
}
.chart {
  width: 100%;
  height: 100%;
}
/* 设备部件统计 */
.sbbj {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height:  480px;
  margin-top: 60px;
  vertical-align: middle;
  img {
      width: 18px;
      height: 16px
      background-repeat: no-repeat;
      background-size: 100%;
      margin-top: 4px;
    }
  p {
    display: inline-block;
    &:nth-child(2) {
      font-size: 16px;
      padding-left: 8px;
      width: 90px;
      position: relative;
    }
    &:nth-child(3) {
      font-size: 24px;
      font-weight: 600;
    }
  }
}
</style>